import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom'
import Context from './components/ContextPage';
import Fragments from './components/Fragments';
import { ReactItems } from './Entries';
import NotFoundFallBack from './NotFoundFallBack';
import ErrorBoundaries from './components/ErrorBoundaries';
import HigherOrderComponents from './components/HigherOrderComponents';
import Hooks from './components/Hooks';
import BuildingYourOwnHooks from './components/BuildingYourOwnHooks';
import JSXInDepth from './components/JSXInDepth';
import RefsandtheDOM from './components/RefsandtheDOM';
import StateandLifecycle from './components/StateandLifecycle';
const pageComponents = {
  Context: Context,
  Fragments: Fragments,
  404: NotFoundFallBack,
  ErrorBoundaries: ErrorBoundaries,
  HigherOrderComponents: HigherOrderComponents,
  Hooks: Hooks,
  BuildingYourOwnHooks: BuildingYourOwnHooks,
  JSXInDepth: JSXInDepth,
  RefsandtheDOM: RefsandtheDOM,
  StateandLifecycle: StateandLifecycle

}
ReactItems.forEach((v, index) => {
  if (pageComponents[v]) return
  pageComponents[v] = NotFoundFallBack
})

ReactDOM.render(
  /* 有 BrowserRouter 和 StaticRouter两种，其中 BrowserRouter 用于浏览器客户端渲染，后者则是服务器渲染 */
  <Router>
    <Routes>
      <Route path="/" element={<App />} />
      {ReactItems.map((name) => {
        let ComponentT = pageComponents[name]
        return <Route key={name} path={name} element={<ComponentT />} />
      })}
      <Route path='404' element={<NotFoundFallBack />} />
      <Route path='*' element={<Navigate to="404" />} />
    </Routes>
  </Router>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
